<template>
  <div class="container">
      <el-card>
        <!-- 头部搜索区 -->
        <el-form ref="form" :model="requestParameters" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据编号搜索"
                  v-model="requestParameters.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" style="text-align: right">
              <el-button size="small" @click="emptySearch">清除</el-button>
              <el-button size="small" type="primary" @click="handleFilter"
                >搜索
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>

        <!-- 表格区域 -->
        <el-table :data="dataList" style="width: 100%" fit>
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template #default="{row}">
              {{ changeQuestionType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="200">
            <template #default="{row}">
              <div v-for="(item, index) in row.questionIDs" :key="index">
                <p class="number" @click="openDialog(item)">
                  {{ item.number }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column label="操作">
            <template #default='{row}'>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="small"
                @click="delRandoms(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination" style="text-align: right">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[20, 30, 50, 100]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-card>

      <!-- 获取题目详情弹出层 -->
      <questions-randoms-preview ref="detailDialog" :is-edit='isEdit' :dialogVisible='showPreviewDialog' @close-dialog='closePreviewDialog'></questions-randoms-preview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import QuestionsRandomsPreview from '@/module-hmmm/components/questions-randoms-preview'
export default {
  components: {
    QuestionsRandomsPreview
  },
  data () {
    return {
      dataList: [], // 列表数据
      requestParameters: {
        // 请求数据
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      total: null, // 总数据条数
      alertText: '', // 数据记录
      showPreviewDialog: false,
      isEdit: true
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      // console.log(1)
      const { data } = await randoms(this.requestParameters)
      // const res = await randoms(this.params)
      console.log(data)
      // console.log(counts)
      // console.log(res)
      this.dataList = data.items
      this.total = data.counts
      this.alertText = `数据一共 ${this.total} 条`
    },
    // 更改题型格式
    changeQuestionType (type) {
      const MAP = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return MAP[type]
    },
    // 页面改变
    handleCurrentChange (newPage) {
      this.requestParameters.page = newPage
      this.getList()
    },
    // 每页条数改变触发
    handleSizeChange (newSize) {
      this.requestParameters.pagesize = newSize
      this.requestParameters.page = 1
      this.getList()
    },
    // 搜索功能
    handleFilter () {
      if (this.requestParameters.keyword.trim() === '') { return this.$message.warning('搜索内容不能为空!') }
      this.requestParameters.page = 1
      this.getList()
    },
    // 清空搜索
    emptySearch () {
      this.requestParameters.keyword = ''
      this.getList()
    },
    // 删除
    delRandoms (data) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(data)
            .then(response => {
              this.$message.success('删除成功')
              this.getList()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        }).catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 预览题目详情
    openDialog (data) {
      this.showPreviewDialog = true
      this.$refs.detailDialog.getSelectDetail(data)
    },
    closePreviewDialog () {
      this.showPreviewDialog = false
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 5px;
  background-color: #fff;
  font-size: 10px;

  .number {
    line-height: 10px;
    cursor: pointer;
    color: rgb(0, 153, 255);
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .el-button--danger {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
    &:hover {
      background-color: #f56c6c;
      color: #fef0f0;
    }
  }
}
</style>
